<template>
  <div id="container"></div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive, onMounted } from "vue";

const state = reactive({
  path: [],
  current_position: [],
});

//进行地图初始化
function initMap() {
  AMapLoader.load({
    key: "25ea690c9b172b9fbd1942ab8e5879b5", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      const map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 10, //初始化地图级别
        center: [120.374926, 30.310678], //初始化地图中心点位置
      });
      //添加插件
      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye"], function () {
        // map.addControl(new AMap.HawkEye()); //显示缩略图
        // map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB'
        })

        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', onComplete)
        AMap.event.addListener(geolocation, 'error', onError)

        function onComplete(data) {
          // data是具体的定位信息
        }

        function onError(data) {
          // 定位出错
        }
      });
      // 单击
      map.on("click", (e) => {
        // console.log(e);
        state.current_position = [e.lnglat.KL, e.lnglat.kT];
        state.path.push([e.lnglat.KL, e.lnglat.kT]);
        addMarker();

        addPolyLine();
        // 地图按照适合展示图层内数据的缩放等级展示
        // map.setFitView();
      });

      // 实例化点标记
      function addMarker() {
        const marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: state.current_position,
          offset: new AMap.Pixel(-26, -54),
        });
        marker.setMap(map);
      }

      // 折线
      function addPolyLine() {
        const polyline = new AMap.Polyline({
          path: state.path,
          isOutline: true,
          outlineColor: "#ffeeff",
          borderWeight: 1,
          strokeColor: "#3366FF",
          strokeOpacity: 0.6,
          strokeWeight: 5,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          // strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });
        map.add([polyline]);
      }
    })
    .catch((e) => {
      console.log(e);
    });
}
initMap();
mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
  geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位，默认:true
    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
    showButton: true,        //显示定位按钮，默认：true
    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
    zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  });
  mapObj.addControl(geolocation);
  geolocation.getCurrentPosition();
  AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
  AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});
onMounted(() => {
  initMap();
});
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: calc(100vh - 50px);
}
</style>